<template>
	<div class="information">
		<div class="describe">
		<div class="title">
		  <span>{{productInformation.productName}}</span>
		  <span class="retailPrice">零售价：</span>
		 <span>￥{{productInformation.price}}元</span>		 
		</div>
		<div class="leasePrice">租赁押金：
			<span class="deposit" :style="{textDecoration:(isMember? 'line-through':'')}">￥{{productInformation.deposit}}元</span>				
		</div>
		<div class="MemberPrice">	
			<span class="Membertitle">会员押金：</span>
			<span class="ratePrice" v-if="isMember">￥{{productInformation.memberRentPrice}}元 </span>
			<div class="addMember" v-else  @click="addMember">
				<div class="ratePrice">￥{{productInformation.memberRentPrice}}元</div>
				<div class="member">
					<span>成为会员</span>
					<i class="el-icon-erp-gengduo"></i>
				</div>				
			</div>
		</div>
		<div class="rentPrice">租赁价格：
			<span>￥{{productInformation.rentPrice}}</span>
			<span>元/每天</span>
		</div>
		<div class="hirePeople">租用人次：
			<span>{{productInformation.rentCount}}次</span>
		</div>
		<div class="manuFacturer">生产厂家：
			<span>{{productInformation.supplierName}}</span>
		</div>
		</div>
		<div class="preferentialactives" v-if="productInformation.favourables !== undefined && productInformation.favourables.length >0">
			<div class="actives" v-for="(item,index) in productInformation.favourables">
			  <h3 v-html="item.favourType">{{item.favourType}}</h3>
			  <p v-html="item.favourDesc">{{item.favourDesc}}</p>
			</div>
		</div>
	</div>
</template>	

<script>
	export default {
		name:'information',
		props:{
			productInformation:{},
			isMember:{
				type:Boolean,
				default:false
			}
		},
		data () {
			return {
			
			}
		},
		created (){
			
		},
		mounted () {
			
		},
		methods: {			
			addMember () {
				this.$router.push('/Memberinfo')
			}
		}
	}
</script>

<style lang="less" scoped>
   .information {
   	font-size: 28px;
   	.describe {
   		padding: 20px 20px;
   		background: #FFFFFF;
   		.title {
   			margin: 12px 0 7px 0;
   			.retailPrice {
   				margin-left: 10px;
   			}
   		}
   		.leasePrice {
   			margin-bottom: 10px;
   			.deposit {
   				color: red;
   			}
   			.ratePrice{
   				color: red;
   			}     				
   		}
   		.MemberPrice {
   			width:100%;
   			margin-bottom: 10px;
   			display: flex;
   			.Membertitle{
   				width:150px;
   			}
   			.ratePrice{
   				flex: 1;
   				color: red;
   			}
   			.addMember{
   				flex: 1;
   				display: flex;
   				.ratePrice{
   					flex: 1;
   					color: red;
   					text-decoration: line-through;
   				}
   				.member{
   					width:170px;
   					color: blue;
   					i{
   						font-size: 30px;
   					}
   				}
   			} 	
   		}	
   		.rentPrice {
   			margin-bottom: 10px;
   			span {
   				color: red;
   			}
   		}
   		.hirePeople {
   			margin-bottom: 10px;
   		}
   		.manuFacturer{
   			margin-bottom: 10px;
   		}
   		.detail{
   			font-size: 24px;
   			color: gray;
   		}
     }
     .preferentialactives{
     	width:100%;
     	background: #FFFFFF;
     	margin:20px 0 20px 0;
     	padding:20px 0;
     	p{
     		text-indent: 2em;
     	}
     	.actives{
     		padding:5px 20px;
     		h3{
     			color: #FF0000;
     		}
     		p{
     			line-height: 45px;
     			text-indent: 2em;
     		}
     	}
     }
   }
</style>